<template>
  <div class="Deadline">
    <van-cell center is-link @click="indateShowOpen">
      <template slot="default">
        <span>{{ indate == 1 ? "长期" : indate == 2 ? "非长期" : "请选择" }}</span>
      </template>
      <template slot="title">
        <div class="c_l">{{ indateTitle }}</div>
      </template>
    </van-cell>
    <van-cell required value-class="r_value">
      <template slot="default">
        <div class="timeBox">
          <div class="timeBox_start" @click="startTimeShowOpen">{{ startTime || "请选择" }}</div>
          <div class="emptyLine">-</div>
          <div class="timeBox_start" v-if="indate != 1" @click="endTimeShowOpen">{{ endTime || "请选择" }}</div>
          <div class="timeBox_start" v-else>长期</div>
        </div>
      </template>
      <template slot="title">
        <div class="c_l">{{ timeTitle }}</div>
      </template>
      <template slot="label" v-if="showTips">
        <div class="tips">营业执照证件号码不是18位时必填</div>
      </template>
    </van-cell>
    <van-popup v-model="startTimeShow" position="bottom" round>
      <van-datetime-picker v-model="currentDate" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @cancel="startTimeShow = false" @confirm="changeStartTime" />
    </van-popup>
    <van-popup v-model="endTimeShow" position="bottom" round>
      <van-datetime-picker v-model="currentDate_end" type="date" title="选择年月日" :min-date="minDate" :max-date="maxDate" @cancel="endTimeShow = false" @confirm="changeEndTime" />
    </van-popup>
    <van-popup v-model="indateShow" position="bottom" round>
      <van-nav-bar :title="indateTitle" @click-left="indateShow = false" @click-right="indateShow = false">
        <template #left>
          <span>取消</span>
        </template>
        <template #right>
          <span>确定</span>
        </template>
      </van-nav-bar>

      <van-radio-group v-model="indate">
        <van-cell-group>
          <van-cell title="长期" clickable @click="indate = '1'" title-style="text-align: left;">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell title="非长期" clickable @click="indate = '2'" title-style="text-align: left;">
            <template #right-icon>
              <van-radio name="2" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    timeTitle: {
      type: String,
      default: ""
    },
    indateTitle: {
      type: String,
      default: ""
    },
    showTips: {
      type: Boolean,
      default: false
    },
    editStatus:{
      type:Boolean,
      default: false
    }
  },
  data() {
    return {
      maxDate: "",
      minDate: "",
      indateShow: false,
      indate: "",
      startTime: "",
      endTime: "",
      currentDate: new Date(),
      currentDate_end: new Date(),
      startTimeShow: false,
      endTimeShow: false
    };
  },
  mounted() {
    let year = new Date().getFullYear();
    this.maxDate = new Date(year + 20, 12, 1);
    this.minDate = new Date(year - 20, 1, 1);
  },
  computed: {
    setChild() {
      if (!this.startTime || !this.indate) {
        return false
      }
      if (this.indate == 1) {
        return `${this.startTime},长期`;
      } else {
        return `${this.startTime},${this.endTime}`;
      }
    }
  },
  methods: {
    endTimeShowOpen(){
      if(this.editStatus) return
      this.endTimeShow = true;
    },
    startTimeShowOpen(){
      if(this.editStatus) return
      this.startTimeShow = true;
    },
    indateShowOpen(){
      if(this.editStatus) return
      this.indateShow = true;
    },
    changeEndTime(e) {
      let separator = this.fun.isIosOrAndroid() ? "/" : "-"; // 根据设备类型选择分隔符
      this.endTime = this.timestampToTime(Date.parse(e) / 1000).replace(/\./g, separator);
      this.endTimeShow = false;
    },
    changeStartTime(e) {
      let separator = this.fun.isIosOrAndroid() ? "/" : "-"; // 根据设备类型选择分隔符
      this.startTime = this.timestampToTime(Date.parse(e) / 1000).replace(/\./g, separator);
      this.startTimeShow = false;
    },
    timestampToTime(timestamp) {
      if (!Number(timestamp) || timestamp == "") {
        return "";
      }
      let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let Y = date.getFullYear() + ".";
      let M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + ".";
      let D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate())
      return Y + M + D;
    }
  }
};
</script>
<style lang="scss" scoped>
.r_value{
  flex: 2;
}
.c_l {
  text-align: left;
}
.tips {
  color: rgba(16, 16, 16, 0.5);
  text-align: left;
  margin-bottom: 0.5rem;
}
.timeBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .emptyLine{
    margin: 0 0.5rem;
  }
}
</style>
